import { removeToken } from '@/utils/auth'
import { Button, Dropdown, Avatar, Breadcrumb } from 'antd'
import React from 'react'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons'
import { useNavigate, useLocation } from 'react-router-dom'
import router from '@/router'

const NavBar = ({
  collapsed,
  setCollapsed,
}: {
  collapsed: boolean
  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>
}) => {
  const navigate = useNavigate()

  const logOut = () => {
    removeToken()
    navigate('/login')
  }
  const items = [
    {
      key: '1',
      label: <a onClick={logOut}>退出登录</a>,
    },
  ]
  const location = useLocation()
  const pathnames = location.pathname.split('/').filter((x) => x)
  const breadItems = pathnames.map((item) => ({ title: item }))
  return (
    <div className="flex justify-between">
      <div className="flex items-center">
        <Button
          type="primary"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => setCollapsed(!collapsed)}
          style={{ marginLeft: 16, marginRight: 16 }}
        />
        <Breadcrumb items={breadItems}></Breadcrumb>
      </div>
      <div className="flex">
        <div className="mr-4">
          <Dropdown menu={{ items }}>
            <Avatar shape="square" icon={<UserOutlined />} />
          </Dropdown>
        </div>
      </div>
    </div>
  )
}

export default NavBar
